<template>
  <div>
    <uNavbar :isBack="false">
      <div text-black text-center w-300rpx>商品分类</div>
      <nut-input
        :input-style="searchStyle"
        :custom-style="searchStyle"
        placeholder="搜索商品"
        @click.native="$navigateTo(`/pages/goods/search/page`)"
      >
        <template #left>
          <div pl-18rpx flex flex-a-c><nut-icon name="search" /></div>
        </template>
      </nut-input>
    </uNavbar>
    <div class="content" flex>
      <!-- 左侧分类 -->
      <scroll-view
        scroll-y
        scroll-with-animation
        class="left-side"
        w-220rpx
        :style="{ height: 'calc(100vh - (100rpx + 70rpx))' }"
      >
        <div
          @click="changeCategoryId(index)"
          text-center
          h-100rpx
          line-height-100rpx
          :class="{
            'text-main-color': index === current,
            'bg-white': index === current
          }"
          :style="{
            borderLeft:
              index === current ? '3rpx solid' + colors.themeColor : 'none'
          }"
          v-for="(item, index) in categoryList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </scroll-view>
      <!-- 右侧内容 -->
      <scroll-view
        @click.stop="toSearchPage(categoryList[current].id)"
        v-if="categoryList[current]"
        class="right-side"
        bg-white
        scroll-with-animation
        scroll-y
        :style="{ height: 'calc(100vh - (100rpx + 70rpx))' }"
      >
        <!-- 头部图片 -->
        <div id="main-top" @click="">
          <image w-500rpx h-230rpx :src="categoryList[current].image"> </image>
        </div>
        <!-- 渲染二级分类 -->
        <div
          v-for="(children, cIndex) in categoryList[current].children"
          :key="cIndex"
        >
          <div py-10rpx my-10rpx text-28rpx>{{ children.name }}</div>
          <div flex flex-wrap gap-24rpx v-if="children.children.length">
            <!-- 渲染三级 -->
            <div
              @click.stop="toSearchPage(grandChildren.id)"
              v-for="(grandChildren, gIndex) in children.children"
              :key="gIndex"
            >
              <div flex flex-col flex-a-c>
                <image w-150rpx h-150rpx :src="grandChildren.image" />
                <div text-26rpx>{{ grandChildren.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
  <shop-tabbar></shop-tabbar>
</template>

<script setup lang="ts">
import { getCategoryList } from '@/api/goods'
import { colors } from '@/constants/injection-key'
import { searchStyle } from '@/components/goods-list/common'
import uNavbar from '@/components/navbar/index.vue'
const categoryId = ref<string>('0')
const categoryList = ref<any>([])
const current = ref<number>(0)

function changeCategoryId(index: number) {
  current.value = index
}
async function init() {
  const res = await getCategoryList(categoryId.value)
  if (res.data.success) {
    categoryList.value = res.data.result

    current.value = 0
  }
}

function toSearchPage(id: any) {
  uni.navigateTo({
    url: '/pages/goods/search/page?category=' + id
  })
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.content {
  display: flex;
  color: #333;
  font-size: 28rpx;
  width: 100%;
}

.left-side {
  flex-shrink: 0;
  width: 200rpx;
  height: 100%;
}

.right-side {
  //#ifdef H5
  height: calc(100vh - 94px);
  // #endif
  //#ifndef H5
  height: calc(100vh);
  // #endif

  flex: 1;
  overflow: hidden;
  padding: 40rpx 0 0 30rpx;
  box-sizing: border-box;
}
</style>
